<template>
  <a-form-item label="api白名单">
    <div class="flex">
      <a-textarea
        class="inline-block"
        v-if="editable"
        v-model="text"
        placeholder="请输入IP"
        :auto-size="{ minRows: 5 }"
      />
      <ul class="w-64 inline-block" v-else>
        <li v-for="(item, index) in all" :key="index">{{ item }}</li>
      </ul>

      <span>
        <a-button type="link" v-if="!editable" icon="edit" @click="onEdit">
          编辑
        </a-button>
        <a-button v-else class="ml-4" type="link" icon="save" @click="save">
          保存
        </a-button>
      </span>
    </div>
    <p v-show="editable" class="text-gray-600 text-sm">
      请输入IP，多个以换行分割
    </p>
  </a-form-item>
</template>

<script>
// import thisTable from './table'
// import editModal from './modal-edit.vue'
// import addModal from './modal-add.vue'

export default {
  // components: { editModal, addModal },
  data() {
    return {
      editable: false,
      all: [],
      text: '',
    }
  },
  created() {
    this.axios.get('/s/whitelist?type=callback').then((res) => {
      this.all = res.data.data.map((item) => item.ip)
      this.text = this.all.join('\n')
    })
  },
  methods: {
    onEdit() {
      this.$emit('edit-whitelist')
    },
    save() {
      let list = this.text
        .split(/[(\r\n)\r\n]+/)
        .map((item) => item.trim())
        .filter((item) => item)
      this.axios
        .post('/s/whitelist', { list, type: 'callback' })
        .then((res) => {
          // console.log(res)
          if (res.data.code === 1) {
            this.$message.success('保存成功')
            this.all = list
            this.editable = false
          } else {
            this.$message.error(res.data.msg)
          }
        })
    },
  },
}
</script>

